<template>
  <div class="merchant-store">
    <div class="merchant-store-info">
      <div class="merchant-store-inner">
        <img :src="shopInfo.thumb_url">
        <div class="merchant-store-content">
          <div class="merchant-store-name">{{shopInfo.name}}</div>
          <div class="sell-num">在售商品：<span style="color:red;font-weight:bold;">99未有字段</span></div>
        </div>
      </div>
      <div class="merchant-store-intro">
        {{shopInfo.contact}}
      </div>
    </div>
    <div class="goods">
      <div class="goods-sort">
        <shop-tabbar @dragSelect="getSelect"/>
      </div>
      <div class="goods-list">
        <div 
        class="goods-inner"
        @click="toGoodsDetail(item)"
         v-for="(item,index) of goodsList"
          :key="index">
          <img :src="item.thumb_Url" alt="">
          <div class="goods-info">
            <div class="goods-name">{{item.name}}</div>
            <div class="goods-price">￥{{item.s_price}}</div>
            <div class="goods-price" v-if="userInfo.user_vip">会员价：￥{{item.vip_price}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import shopTabbar from '@/components/shopTabbar';
import {mapState} from 'vuex';
export default {
  data(){
    return {
      id:'',
      page:0,
      goodsList:[],//商品列
      shopInfo:'',//商店信息
      sort_type:''//排序类容
    }
  },
  components:{
    shopTabbar
  },
  computed: {
    ...mapState(['userInfo'])
  },
  methods:{
    toGoodsDetail(item){
      //跳转商品详情
      this.$currency.navigateTo(`/pages/shopMain/goodsDetail/main?id=${item.id}`)
    },
    async getGoodsList(){
      //获取商品列表
      wx.showLoading({title: '加载中'})
      const res=await this.$api.getGoodsList({
        // limit:10,
        shop_id:this.id,
        page:this.page,
        sort_type:this.sort_type
      })
      wx.hideLoading()
      if(res.data.level=='success' ){
        if(res.data.data.length>0){
          const data=this.goodsList;
          this.goodsList=[...data,...res.data.data]
          this.shopInfo=res.data.shop_info
        }else{
          this.page=this.page-1
        }
        
      }
      setTimeout(()=>{
        wx.stopPullDownRefresh()
      },500)
    },
    getSelect(e){
      //获取排序项目
      const name=e.name;
      switch(name){
        case '综合':this.sort_type='';break;
        case '价格降序':this.sort_type='price_desc';break;
        case '价格升序':this.sort_type='price_asc';break;
        case '销量':this.sort_type='sale_desc';break;
      }
      console.log(name)
      this.page=0;
      this.goodsList=[];
      this.getGoodsList();
    }
   
  },
   onReachBottom(){
      this.page++;
      this.getGoodsList();
    },
    onPullDownRefresh() {
      this.page=0;
      this.goodsList=[];
      this.getGoodsList();
    },
  onLoad(options){
    if(options.id){
      this.id=options.id
    }
    this.getGoodsList()
  },
  //下拉刷新
  onPullDownRefresh () {
    this.getGoodsList()
  },
}
</script>

<style lang="scss" scoped>
  .merchant-store{
    width: 100%;
    padding: 0 20rpx;
    .merchant-store-info{
      background-color: #fff;
      margin-bottom: 16rpx;
      .merchant-store-inner{
        display: flex;
        align-items: center;
        img{
          width: 250rpx;
          height: 150rpx;
        }
        .merchant-store-content{
          display: flex;
          flex-direction: column;
          justify-content:center;
          height: 100rpx;
          margin-left: 20rpx;
          .merchant-store-name{
            font-size: 16px;
            height: 50rpx;
            line-height: 50rpx;
          }
          .sell-num{
            font-size: 14px;
            color: #333333;
            height: 50rpx;
            line-height: 50rpx;
          }
        }
      }
      .merchant-store-intro{
        font-size: 14px;
        line-height: 18px;
        overflow: hidden;
        color: #888;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }
    }
    .goods{
      .goods-list{
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        .goods-inner{
          width: 346rpx;
          height: 350rpx;
          margin-bottom: 10rpx;
          img{
            width: 100%;
            height: 250rpx;
          }
          .goods-name{
            width: 100%;
            font-size: 32rpx;
            height: 60rpx;
            line-height: 60rpx;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
          }
          .goods-price{
            font-size: 28rpx;
            height: 40rpx;
            line-height: 40rpx;
            color: rgb(230, 59, 59);
            font-weight: 600;
          }
        }
      }
    }
    
  }
</style>